<template>
    <el-main>
        <p>水蜜桃</p>
        <p>溯源系统</p>
        <el-card>
            <el-carousel height="150px" arrow="always" @change="showMes">
                <el-carousel-item v-for="item in imgsArr" :key="item">
                    <img :src="item">
                </el-carousel-item>
            </el-carousel>
        </el-card>
        <p id="msg">{{mesArr[index]}}</p>
    </el-main>
</template>

<script>
export default {
    data () {
        return {
            imgsArr: [require('../../assets/images/light.svg'), require('../../assets/images/dark.svg'), require('../../assets/images/salary.svg')],
            mesArr: ['链接未来', 'Show me the 链', '区块新科技'],
            index: 0
        }
    },
    methods: {
        showMes (e) {
            this.index = e
        }
    }
}
</script>

<style lang="less" scoped>
.el-main {
    font-size: 30px;
    background-color: #0099bb;
    color: white;
    .el-card {
        width: 45%;
        margin-left: 3%;
    }
    .el-carousel {
        width: 100%;
        padding-bottom: 25px;
        img {
            background-size: 100%;
            width: 100%;
            height: 100%;
        }
    }
    #msg {
        margin-right: 50%;
        font-size: 25px;
        text-align: center;
    }
}
</style>